<template>
  <div class="xyd-number-input">
    <span class="xyd-number-input-decrease"
      @click="handleDecrease"
    >
      <i class="el-icon-minus"></i>
    </span>
    <span class="xyd-number-input-increase"
      @click="handleIncrease"
    >
      <i class="el-icon-plus"></i>
    </span>
    <div class="xyd-input-container">
      <input class="xyd-input-inner" :value="val" readonly />
    </div>
  </div>
</template>

<script>
export default {

  name: 'NumberInput',

  data() {
    return {
      val: this.value
    };
  },
  props: {
    value: {
      type: Number
    },
    min: {
      type: Number
    },
    max: {
      type: Number
    },
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    handleDecrease() {
      if (this.val > this.min) {
        this.val = this.val - 1
        this.$emit('num-change', -1, this.item)
      }
    },
    handleIncrease() {
      if (!this.max || (this.max && this.val < this.max)) {
        this.val = this.val + 1
        this.$emit('num-change', 1, this.item)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.xyd-number-input{
  display: inline-block;
  position: relative;
  .xyd-number-input-decrease{
    height: auto;
    border-right: 1px solid #bfcbd9;
    width: 26px;
    line-height: 24px;
    top: 1px;
    left: 0;
    text-align: center;
    color: #97a8be;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    &:hover{
      color: #00A2EA;
    }
  }
  .xyd-number-input-increase{
    height: auto;
    border-left: 1px solid #bfcbd9;
    width: 26px;
    line-height: 24px;
    top: 1px;
    right: 0;
    text-align: center;
    color: #97a8be;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    &:hover{
      color: #00A2EA;
    }
  }
  .xyd-input-container{
    width: 100%;
    .xyd-input-inner{
      width: 100%;
      display: inline-block;
      height: 26px;
      line-height: 1;
      padding: 2px 30px;
      text-align: center;
    }
  }
}
</style>